/* Home */
html,body { overflow-x:hidden;}
.wrap { clear:both; margin:0 auto; padding:0; font-family:"Microsoft Yahei","Simhei",Arial,Helvetica,sans-serif;}
.wrap a:hover { text-decoration:none;}
.inner-wrap { clear:both; margin:0 auto; padding:0; width:1160px;}

.header-wrap,.container-wrap,.footer-wrap { clear:both; margin:0 auto; padding:0;}
.header-wrap { height:660px; background:url(../images/banner-m-1.jpg) no-repeat center top; background-size:cover;}

.g-wrap { margin:10px auto; width:1160px;}

/* Header */
.header-nav-wrap { clear:both; display:block; height:60px; background:url(../images/opacity-line.png) repeat-x center bottom;}
.header-nav-wrap .inner-wrap { height:60px; line-height:60px;}

.logo { float:left; display:inline-block; *display:block; width:310px; height:60px; background:url(../images/logo.png) no-repeat left center; text-indent:-10000000px;}

.header-nav { float:right; display:inline-block; *display:block; margin:0; padding:0; list-style:none;}
.header-nav .header-nav-item { float:left; display:inline-block; margin:0 8px; height:60px;}
.header-nav .header-nav-item a { display:block; padding:0 10px; line-height:57px; border-top:3px solid transparent; text-align:center; font-size:16px; color:#fff;}
.header-nav .header-nav-item a:hover { border-top-color:#fff; color:#fff;}

.log-group { float:right; display:inline-block; *display:block;}
.log-group .log-btn { display:inline-block; margin-right:10px; padding:5px 10px; border-radius:2px; border:1px solid #fff; line-height:1.5; font-size:12px;}
.log-group .reg-btn { background-color:#fff; color:#55BBA0;}
.log-group .reg-btn:hover { border-color:rgba(255,255,255,.3); background-color:rgba(255,255,255,.5); *background-color:transparent; color:#fff;}
.log-group .login-btn { background-color:transparent; color:#fff;}
.log-group .login-btn:hover { border-color:rgba(255,255,255,.3); background-color:rgba(255,255,255,.5); *background-color:transparent; color:#fff;}

.login-group { float:right; display:inline-block; margin-top:15px; line-height:60px;}
.login-group .loged-btn { float:right; padding:5px; max-width:100px; background-color:#fff; color:#55BBA0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all; text-align:center;}
.login-group .logout-btn { float:right; background-color:transparent; color:#fff;}

.header-primary { clear:both; height:763px;}
.header-primary .header-primary-text { clear:both; height:240px;}
.header-primary .header-primary-image { position:relative; clear:both; height:523px;}

/*- Header Nav Wrap -*/
.header-nav-wrap { transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out;}
.header-nav-wrap.sticky { position:fixed; top:0; right:0; left:0; z-index:100; border-bottom:0; background-color:rgba(39,38,38,.9); *background-color:#3C3B3B; background-color:#3C3B3B\0; background-image:none; -webkit-backface-visibility:hidden;}

/*- Header Primary Text -*/
.header-primary .header-primary-text { position:relative; overflow:hidden; width:100%; text-align:center;} 
.header-text-group { display:block; margin:0; padding:0; list-style:none; zoom:1;}
.header-text-group .header-text-item { zoom:1; vertical-align:middle; text-align:center; color:#fff;}

.header-text-title { clear:both; line-height:80px; font-size:32px; font-weight:normal;}
.header-text-int { clear:both; line-height:60px; font-size:20px;}
.header-text-btn-group { clear:both; margin:20px auto; height:40px;}
.header-text-btn-group .header-text-btn { display:inline-block; margin:0 10px; width:160px; height:40px; line-height:36px; border-radius:3px; border:1px solid #fff; background-color:transparent; font-size:14px; color:#FFF;}
.header-text-btn-group .header-text-btn:hover { color:#fff; backgrond-color:rgba(255,255,255,.5);}

/* Container */
.container-wrap {}
.container-group {}
.container-group .container-titlebar { clear:both; margin-bottom:50px;}
.container-group .container-titlebar .container-title { clear:both; line-height:45px; text-align:center; font-size:24px; color:#444;}
.container-group .container-titlebar .container-int { clear:both; line-height:1.5; font-size:14px; color:#666;}

/*- Function Group -*/
.function-group { margin-top:20px; *margin-bottom:60px; padding:0; list-style:none;}
.function-group .function-group-item { float:left; display:inline-block; *display:block; margin-bottom:60px; width:33.3334%; *width:33%; height:90px; text-align:left; font-size:0;}
.function-group .function-group-item .function-box { *display:table; margin:0 auto; padding-left:90px; width:260px; font-size:0; box-sizing:content-box; -webkit-box-sizing:content-box;}
.function-group .function-group-item .function-box .function-box-icon { float:left; display:inline-block; *display:table-cell; margin-left:-90px; width:88px; height:88px; line-height:88px; border-radius:3px; border:1px solid #26BDEF; text-align:center; *font-size:70px; vertical-align:middle;}
.function-group .function-group-item .function-box .function-box-icon img { vertical-align:middle;}
.function-group .function-group-item .function-box .function-box-content { float:left; display:inline-block; *display:block; padding-left:10px; width:95%; height:90px; line-height:1.5; font-size:12px; color:#999;}
.function-group .function-group-item .function-box .function-box-content .function-box-title { clear:both; margin-bottom:10px; font-size:14px; color:#444;}

/*- Content Manage Group -*/
.content-manage-group { clear:both; height:540px; background:url(../images/banner-m-2.jpg) no-repeat center top; background-size:cover;}
.content-manage-group .container-titlebar { margin-top:30px;}

.content-manage-wrap { position:relative; clear:both; margin:60px auto; width:100%; overflow:hidden;}
.content-manage-wrap .tempWrap { width:1160px !important;}
.content-manage-wrap .content-manage-list { display:block; margin:0; padding:0; list-style:none; font-size:0; overflow:hidden; zoom:1;}
.content-manage-wrap .content-manage-list .content-manage-item { float:left; display:inline-block; *display:block; margin-right:40px; width:360px; box-sizing:content-box; -webkit-box-sizing:content-box;}

.content-manage-wrap .page-btn { position:absolute; top:50%; margin-top:-31.5px; left:-40px; width:30px; height:63px; background:url(../images/slider-arrow.gif) no-repeat; opacity:.4; filter:alpha(opacity=40);}
.content-manage-wrap .page-btn:hover { opacity:.8; filter:alpha(opacity=80); cursor:pointer;}
.content-manage-wrap .page-btn.page-btn-prev { background-position:0 0;}
.content-manage-wrap .page-btn.page-btn-next { left:auto; right:-40px; background-position:-30px 0;}

.content-manage-wrap .page-btn-list { position:absolute; top:110%; right:0; left:0; *display:block; margin:0; padding:0; *padding-left:48%; height:30px; line-height:30px; list-style:none; *text-align:center;}
.content-manage-wrap .page-btn-list li { display:inline-block; *float:left; *display:block; margin:0 5px; width:15px; height:15px; border-radius:50%; background-color:#4F85AF; font-size:12px; text-indent:-3000px; overflow:hidden; opacity:.4; filter:alpha(opacity=40); cursor:pointer;}
.content-manage-wrap .page-btn-list li.on { opacity:.8; filter:alpha(opacity=80);}

/*- Bulid Step -*/
.bulid-step-group {}
.bulid-step-group .container-titlebar { margin-top:30px;}

.bulid-step-wrap { clear:both; margin:30px auto; padding:0; height:210px; list-style:none;}
.bulid-step-wrap .bulid-step-item { position:relative; z-index:1; float:left; display:inline-block; *display:block; width:33.333%; *width:33%; height:210px; background:url(../images/icon/icon-arrow.gif) no-repeat left center; text-align:center;}
.bulid-step-wrap .bulid-step-item:first-child { background-image:none;}

.bulid-step-wrap .bulid-step-item:after { position:absolute; top:20px; left:0; z-index:10; display:block; width:18px; height:34px;}
.bulid-step-wrap .bulid-step-item .bulid-step-icon { clear:both; height:110px; line-height:110px; vertical-align:middle;}
.bulid-step-wrap .bulid-step-item .bulid-step-icon img { vertical-align:middle;}
.bulid-step-wrap .bulid-step-item .bulid-step-title { clear:both; line-height:40px; font-size:16px; color:#444;}
.bulid-step-wrap .bulid-step-item .bulid-step-int { clear:both; line-height:40px; font-size:14px; color:#666;}

.bulid-step-group hr { clear:both; margin:0; padding:0; height:1px; overflow:hidden; border:0; border-bottom:1px solid #ddd;}

/*- Product Feature -*/
.product-feature-wrap { clear:both; margin:30px auto; *margin:30px auto; margin:30px auto\0; padding:0; list-style:none;}
.product-feature-wrap .product-feature-item { float:left; display:inline-block; *display:block; margin-bottom:30px; width:580px; hegiht:90px;}
.product-feature-wrap .product-feature-item .product-feature-icon { float:right; display:inline-block; width:140px; height:90px; text-align:center; vertical-align:top;}

.product-feature-wrap .product-feature-item .product-feature-content { float:left; display:inline-block; width:440px; text-align:right;}
.product-feature-wrap .product-feature-item .product-feature-content .product-feature-title { clear:both; margin-bottom:10px; line-height:1; font-size:16px; color:#444;}
.product-feature-wrap .product-feature-item .product-feature-content .product-feature-int { clear:both; line-height:1.5; font-size:14px; color:#666;}

.product-feature-wrap .product-feature-item.item-right .product-feature-icon { float:left;}
.product-feature-wrap .product-feature-item.item-right .product-feature-content { float:right; text-align:left;}

.bulid-site-btn { clear:both; display:inline-block; margin:40px auto; *margin:20px auto; margin:40px auto\0; padding:12px 20px; border-radius:3px; background-color:#59C4FF; text-align:center; color:#fff; font-size:16px;}
.bulid-site-btn:hover { color:#fff;}
.bulid-site-btn .fa { margin-left:10px; font-size:14px;}

/* Footer */

/*- Footer Banner -*/
.footer-banner { clear:both; padding-top:40px; height:260px; background:url(../images/footer_banner.jpg) no-repeat left top; background-size:cover; -ms-behavior:url(/content/statics/css/backgroundsize.min.htc); behavior:url(/content/statics/css/backgroundsize.min.htc); text-align:center; color:#fff; font-size:20px; box-sizing:content-box; -weight-box-sizing:content-box;}
.footer-banner h3 { clear:both; padding:30px 0; line-height:45px; font-size:32px; font-weight:normal;}
.footer-banner-btn { display:inline-block; padding:10px 20px; border-radius:3px; background-color:#2ECC71; text-align:center; font-size:16px; color:#fff;}
.footer-banner-btn:hover { color:#fff;}

/*- Footer Primary -*/
.footer-primary-wrap { clear:both; padding-top:10px; height:240px; background-color:#313030; color:#ADACAC; box-sizing:content-box; -webkit-box-sizing:content-box;}
.footer-primary-wrap .footer-primary-item { float:left; display:inline-block; margin-right:3.333%; *margin-right:3%; width:30%;}

.footer-primary-group { clear:both; margin-bottom:20px; text-align:left;}
.footer-primary-group .footer-primary-title { clear:both; line-height:35px; font-size:16px;}
.footer-primary-group .footer-primary-container {}

.footer-primary-link { display:block;}
.footer-primary-link .footer-primary-link-item { float:left; display:inline-block; *display:inline; padding:10px 25px 10px 0; *padding:5px 12px 5px 0; font-size:14px;}
.footer-primary-link .footer-primary-link-item a { color:#838383;}
.footer-primary-link .footer-primary-link-item a:hover { color:#fff;}

.footer-primary-link.link-block {}
.footer-primary-link.link-block .footer-primary-link-item { clear:both; float:none; display:block; padding-top:10px; padding-left:45px; line-height:35px;}
.footer-icon { float:left; display:inline-block; display:block; *position:relative; margin-left:-45px; padding:0; width:35px; height:35px; line-height:32px; border-radius:50%; border:1px solid #838383; text-align:center; font-size:14px; color:#838383;}
.footer-icon .fa { *margin-top:32%; font-size:14px;}
.footer-text { float:left; display:block; width:100%; line-height:35px;}

.qcode-group { float:right; display:inline-block; margin:0; margin-top:0;}
.qcode-group .qcode-image { display:inline-block; margin:10px;}
.qcode-group .qcode-title { clear:both; line-height:25px; text-align:center; font-size:12px; color:#838383;}

.footer-copyright { clear:both; height:60px; line-height:60px; background-color:#272626; text-align:center; color:#A9A8A8; font-size:14px;}

/* Index */
.index-container-wrap { padding-top:180px;}
.index-footer-wrap { clear:both; margin-top:90px;}

/* Features */
.page-header-wrap { clear:both; height:480px; background-repeat:no-repeat; background-position:left top; background-size:cover; background-attachment:fixed;}

.feature-header-wrap { background-image:url(../images/feature-banner2.jpg);}
.feature-header-wrap .header-primary { height:420px;}

.feature-header-wrap .log-group .reg-btn { color:#856B74;}

/*- Feature Banner -*/
.feature-banner-pic { float:left; margin:100px 0 0 25px; width:490px; height:280px;}
.feature-banner-text { float:right; margin:140px 130px 0 0; width:460px; height:220px; line-height:2; text-align:right; font-size:18px; color:#fff;}
.feature-banner-text .feature-banner-sub-title { clear:both; line-height:35px; text-align:left; font-size:24px; font-weight:normal;}
.feature-banner-text .feature-banner-title { clear:both; line-height:45px; text-align:left; font-size:32px; font-weight:normal;}
.feature-banner-text .feature-banner-btn { float:left; margin-top:30px; width:240px; line-height:40px; border-radius:3px; border:1px solid #ddd; background-color:transparent; text-align:center; font-size:16px; color:#fff;}

/*- Content Group -*/
.content-group { clear:both; padding:100px 0; box-sizing:content-box; -webkit-box-sizing:content-box;}
.content-group .content-group-text { float:left; display:inline-block; margin-left:40px; padding-top:30px; line-height:1.8; text-align:right; font-size:16px; color:#666;}
.content-group .content-group-text .content-group-title { clear:both; margin-bottom:10px; line-height:40px; font-size:28px; color:#444; font-weight:normal;}
.content-group .content-group-image {float:right; display:inline-block; margin-right:50px;}

/*- Feature Content Group -*/
.content-group.group-1 { height:380px;}

.content-group.group-2 { height:300px; background-color:#F4F4F4;}
.content-group.group-2 .content-group-text { float:right; margin-left:auto; margin-right:100px; text-align:left;}
.content-group.group-2 .content-group-image { float:left; margin-right:auto; margin-left:30px;}

.content-group.group-3 { height:300px;}
.content-group.group-3 .content-group-image { margin-right:30px;}

.content-group.group-4 { height:300px; background-color:#F4F4F4;}
.content-group.group-4 .content-group-text { float:right; margin-left:auto; margin-right:100px; text-align:left;}
.content-group.group-4 .content-group-image { float:left; margin-right:auto; margin-left:30px;}

/* Product */
.product-header-wrap { background-image:url(../images/product-banner.jpg); background-position:center 250%;}

.product-banner-text { position:relative; margin:110px auto; width:600px; height:120px;}
.product-banner-text .product-banner-text-left { position:absolute; top:0; bottom:0; left:0; width:40px; border:3px solid #fff; border-right:0;}
.product-banner-text .product-banner-text-right { position:absolute; top:0; bottom:0; right:0; width:40px; border:3px solid #fff; border-left:0;}
.product-banner-text .product-banner-text-center { position:absolute; top:10px; right:30px; left:30px; line-height:2; text-align:center; font-size:24px; color:#fff;}
.product-banner-text .product-banner-text-center h3 { clear:both; line-height:60px; font-size:48px; font-weight:normal;}
.product-banner-text .product-banner-text-center .product-banner-icon { margin:20px auto; width:32px; height:21px; background:url(../images/product-banner-icon.png) no-repeat center top;}

.product-container-wrap { padding:50px 0;}

/*- Product Group -*/
.product-group { position:relative; width:1160px; height:1650px;}
.product-group .product-group-item { position:absolute; top:0; z-index:10; width:324px;}
.product-group .product-group-item .product-group-topbar { clear:both; padding-top:10px; height:90px; background-color:#5FBDF9; text-align:center; color:#fff; box-sizing:content-box; -webkit-box-sizing:content-box;}
.product-group .product-group-item .product-group-topbar h4 { clear:both; line-height:30px; font-size:16px; font-weight:normal;}
.product-group .product-group-item .product-group-topbar .product-price { clear:both; line-height:50px; font-size:28px; font-weight:normal;}
.product-group .product-group-item .product-group-topbar .product-price small { margin-left:10px; font-size:16px;}

.product-group .product-group-item .product-group-list { clear:both; display:block; margin:0; padding:0; list-style:none; border:1px solid #ddd; border-top:0; background-color:#fff;}
.product-group .product-group-item .product-group-list .product-group-list-item { clear:both; display:block; margin:0; padding:15px 0; background-color:#fff; list-style:none; text-align:center; font-size:14px;}
.product-group .product-group-item .product-group-list .product-group-list-item.even { background-color:#f4f4f4; color:#444;}

.product-group .product-group-item .product-group-list .product-group-list-item .product-group-btn { display:block; margin:0 auto; width:160px; height:35px; line-height:35px; border-radius:3px; background-color:#5FBDF9; text-align:center; color:#fff; font-size:14px;}
.product-group .product-group-item .product-group-list .product-group-list-item .product-group-btn:hover { background-color:#5CA2E0; color:#fff; text-decoration:none;}
.product-group .product-group-item .product-group-list .product-group-list-item .fa { font-size:14px; color:#47AC39;}

.product-group .product-group-item.product-titlebar { left:0; width:200px;}
.product-group .product-group-item.product-titlebar .product-group-topbar h4 { line-height:80px;}
.product-group .product-group-item.product-free { left:199px;}
.product-group .product-group-item.product-personal { left:522px;}
.product-group .product-group-item.product-ultimate { left:845px;}

.product-group .product-group-item.product-free .product-group-topbar,.product-group .product-group-item.product-personal .product-group-topbar,.product-group .product-group-item.product-ultimate .product-group-topbar { border-left:1px solid #9FD7FB;}

.product-group .product-group-item.active { top:-15px; bottom:-10px; z-index:20; border:2px solid #5CA2E0;}
.product-group .product-group-item.active .product-group-topbar { padding-top:23px; border:0; background-color:#5CA2E0;}
.product-group .product-group-item.active .product-group-list { border:0;}

/*- Service Group -*/
.service-group { height:1660px;}
.service-group .product-group-item.product-titlebar h4.s-title { clear:both; padding:0 15px; text-align:left; color:#444;}
.service-group .product-group-item.product-titlebar p.s-content { clear:both; padding:0 15px; line-height:1.5; text-align:left; color:#777;}
.service-group .product-group-item.product-titlebar .product-group-list .product-group-list-item { height:110px;}

.service-group .product-group-item.product-titlebar { width:290px;}
.service-group .product-group-item.service-base { left:289px; width:290px;}
.service-group .product-group-item.service-personal { left:578px; width:290px;}
.service-group .product-group-item.service-ultimate { left:867px; width:290px;}
.service-group .product-group-item.service-base .product-group-list .product-group-list-item,.service-group .product-group-item.service-personal .product-group-list .product-group-list-item,.service-group .product-group-item.service-ultimate .product-group-list .product-group-list-item { height:110px; line-height:80px;}
.service-group .product-group-item.service-base .product-group-list .product-group-list-item:last-child,.service-group .product-group-item.service-personal .product-group-list .product-group-list-item:last-child,.service-group .product-group-item.service-ultimate .product-group-list .product-group-list-item:last-child { height:65px; line-height:40px;}

/*- Order Group -*/
.order-group { height:1250px;}
.order-group .product-group-item.product-titlebar h4.s-title { clear:both; padding:0 15px; text-align:left; color:#444; font-size:14px;}
.order-group .product-group-item.product-titlebar p.s-content { clear:both; padding:0 15px; line-height:1.5; text-align:left; color:#777;}
.order-group .product-group-item.product-titlebar .product-group-list .product-group-list-item { height:40px; line-height:1;}

.order-group .product-group-item.product-titlebar { width:290px;}
.order-group .product-group-item.order-base { left:289px; width:435px;}
.order-group .product-group-item.order-personal { left:723px; width:435px;}
.order-group .product-group-item.order-base .product-group-list .product-group-list-item,
.order-group .product-group-item.order-personal .product-group-list .product-group-list-item,
.order-group .product-group-item.order-ultimate .product-group-list .product-group-list-item { height:40px;}
.order-group .product-group-item.order-base .product-group-list .product-group-list-item:last-child,
.order-group .product-group-item.order-personal .product-group-list .product-group-list-item:last-child,
.order-group .product-group-item.order-ultimate .product-group-list .product-group-list-item:last-child { height:65px; line-height:40px;}

/* Product Service */
.product-service-wrap { padding:20px 0; background:url(../images/product-service-fullscreen.jpg) no-repeat center; background-size:cover;}

.product-service-titlebar { clear:both; margin:0 auto; width:600px; text-align:center; color:#fff;}
.product-service-titlebar h4 { clear:both; line-height:50px; font-size:36px; font-weight:normal;}
.product-service-titlebar p { clear:both; line-height:30px; font-size:20px; font-weight:normal;}

.product-service-main { padding:40px 0;}

.porduct-service-group { float:left; padding:20px; width:560px; height:270px; border-radius:3px; background-color:#fff;}
.ps-group-left { float:left; width:190px;}
.ps-group-left .ps-group-img { clear:both; height:150px;}
.ps-group-left .ps-group-price { clear:both; line-height:35px; text-align:center; color:#58B0BB; font-size:24px;}
.ps-group-left .ps-group-btn { clear:both; display:inline-block; margin:10px auto; padding:8px 30px;}
.ps-group-left .ps-group-link { clear:both; display:block; font-size:14px; color:#6DB5F9;}
.ps-group-left .ps-group-link:hover { color:#6DB5F9;}

.ps-group-right { float:right; width:310px; line-height:1.5; text-align:left; font-size:14px;}
.ps-group-right .ps-group-int { clear:both; margin-bottom:20px; color:#878787;}
.ps-group-right .ps-service-list {}
.ps-group-right .ps-service-list .ps-service-list-item { line-height:30px; list-style:square inside; text-indent:15px; color:#666;}

/*- Product Titlebar -*/
.p-titlebar { clear:both; margin-bottom:20px; text-align:center;}
.p-titlebar .p-title { clear:both; line-height:50px; font-size:24px; color:#383F46;}
.p-titlebar .p-int { clear:both; line-height:35px; font-size:18px; color:#666;}
.p-titlebar hr { margin:10px auto; border:0; border-bottom:1px solid #ddd;}
.p-block { line-height:35px; font-size:16px; color:#999;}

.service-content-group {}
.service-content-group .service-img { float:left; width:450px; height:310px;}
.service-content-group .service-content { float:right; width:680px; line-height:2; text-align:left; color:#666; font-size:16px;}
.service-content-group .service-content h4 { clear:both; margin-bottom:20px; line-height:40px; font-size:20px; color:#666; font-weight:normal;}

/*-- Service Flow --*/
.service-flow-group { clear:both; padding-top:20px;}
.service-flow-titlebar { clear:both; height:50px; line-height:50px; border-bottom:1px solid #ddd; text-align:center; font-size:24px; color:#383F46;}

.service-flow { margin:0; padding:20px 0 0 0; list-style:none;}
.service-flow .service-flow-item { clear:both; display:block; margin-bottom:10px;}
.service-flow .service-flow-item .service-flow-img { float:left; width:90px; height:90px; margin-right:20px;}
.service-flow .service-flow-item .service-flow-content { float:left; width:1000px; line-height:1.5; text-align:left; color:#666; font-size:14px;}
.service-flow .service-flow-item .service-flow-content h4 { clear:both; margin-bottom:10px; font-size:16px; color:#444;}

.service-flow .service-flow-item.service-flow-arrow { clear:both; height:80px; background:url(../images/service-flow-arrow.gif) no-repeat 28px center;}

/* Template */
.template-header-wrap { background-image:url(../images/template-banner.jpg);}

/*- Template Banner -*/
.template-banner-wrap { margin:110px auto 0 auto; text-align:center; color:#fff;}
.template-banner-wrap .template-banner-text { clear:both; line-height:1.5; font-size:24px;}
.template-banner-wrap .template-banner-text h3 { clear:both; margin-bottom:10px; line-height:60px; font-size:48px; font-weight:normal;}

.template-banner-wrap .template-banner-btn-group { margin-top:100px; height:40px;}
.template-banner-wrap .template-banner-btn-group .template-banner-btn { display:inline-block; margin:0 20px; padding:8px 25px; border-radius:3px; border:1px solid #fff; background-color:transparent; text-align:center; font-size:14px; color:#fff;}
.template-banner-wrap .template-banner-btn-group .template-banner-btn .fa { margin-right:10px;}
.template-banner-wrap .template-banner-btn-group .template-banner-btn:hover { border-color:rgba(255,255,255,.2); background-color:rgba(255,255,255,.3); color:#fff;}

/* Template List */
.template-topbar { clear:both; margin:20px auto; height:40px; border-bottom:1px solid #ddd;}
.template-topbar .template-type { float:left; display:inline-block; width:160px; height:30px;}
.template-topbar .search-group { position:relative; float:left; display:inline-block; width:200px; height:30px; border-radius:2px; border:1px solid #ddd; background-color:#fff;}
.template-topbar .template-color { float:right; display:inline-block; height:30px;}



/*- Cube Select-*/
.cube-select { position:relative; margin-right:10px; padding:0 30px 0 10px; height:30px; border-radius:2px; border:1px solid #ddd; background:#fff url(../images/select-arrow.jpg) no-repeat right center; cursor:pointer;}
.cube-select input { display:block; width:100%; height:28px; line-height:28px; border:0; outline:0; background:none;}
.cube-select ul { display:none; position:absolute; right:-1px; left:-1px; top:29px; width:100%; overflow:hidden; background-color:#fff; max-height:250px; overflow-y:auto; border:1px solid #ccc; border-top:0; border-radius:0 0 2px 2px; z-index:9999;}
.cube-select ul li { padding:0 10px; height:30px; line-height:30px; text-align:left; color:#666; text-overflow:ellipsis; overflow:hidden; word-break:break-all; white-space:nowrap; cursor:pointer;}
.cube-select ul li.on { background-color:#eee; color:#444;}

/*- Template Search -*/
.search-group { position:relative; height:30px;}
.search-group .template-search-input { position:absolute; top:0; right:30px; bottom:0; left:0; padding:5px 10px; line-height:1.4; border:0; outline:0; border-radius:2px 0 0 2px; text-align:left; font-size:14px; color:#666;}
.search-group .template-search-btn { position:absolute; top:0; right:0; bottom:0; width:30px; line-height:26px; border:0; outline:0; background-color:transparent; text-align:center; font-size:14px; color:#999;}

/*- Template Color -*/
.template-color .template-color-item { float:left; display:inline-block; margin:5px 10px 0 0; width:20px; height:20px; border-radius:2px;}
.template-color .template-color-item a { display:block; height:20px; border-radius:2px;}

.template-color .template-color-item.color-white { border:1px solid #ddd; background-color:#fff;}
.template-color .template-color-item.color-black { background-color:#2F353B;}
.template-color .template-color-item.color-gray { background-color:#BDBDBD;}
.template-color .template-color-item.color-blue { background-color:#42A5F5;}
.template-color .template-color-item.color-red { background-color:#EF5350;}
.template-color .template-color-item.color-orange { background-color:#FFA726;}
.template-color .template-color-item.color-yellow { background-color:#FFEE58;}
.template-color .template-color-item.color-green { background-color:#66BB6A;}
.template-color .template-color-item.color-purple { background-color:#AB47BC;}
.template-color .template-color-item.color-pink { background-color:#EC407A;}
.template-color .template-color-item.color-more { background:url(../images/template-color-more.gif) no-repeat;}

/*- Template List -*/
.template-list { display:block; margin:0; padding:0; list-style:none;}
.template-list .template-list-item { float:left; display:block; margin:0 40px 30px 0; width:260px; height:290px;}
.template-list .template-list-item .template-list-image { position:relative; z-index:1; clear:both; height:208px; border-radius:2px; background:url(../images/template-list-image-bg.gif) no-repeat center;}
.template-list .template-list-item .template-list-image .template-ver { position:absolute; top:0; left:0; width:75px; height:75px;z-index:99;}
.template-list .template-list-item .template-list-image .template-ver img { width:75px; height:75px;}
.template-list .template-list-item .template-list-image img { margin:14px 2px 2px 2px; width:256px; height:192px; border-radius:2px;}
.template-list .template-list-item .template-list-image .template-list-mark { display:none;}
.template-list .template-list-item .template-list-title { clear:both; line-height:35px; text-align:left; font-size:16px; color:#444;}
.template-list .template-list-item .template-list-info { clear:both; height:60px;}
.template-list .template-list-item .template-list-info .template-num { clear:both; line-height:30px; text-align:left; color:#999;}
.template-list .template-list-item .template-list-info .template-designer { float:left; display:inline-block; line-height:30px; text-align:left; color:#999;}
.template-list .template-list-item .template-list-info .template-price-btn { float:right; display:inline-block; padding:4px 15px 5px 15px; line-height:1.4; border-radius:2px; border:1px solid #9EC7EC; background-color:#fff; text-align:center; color:#5CA2E0; font-size:14px;}

.template-list .template-list-item:hover .template-list-image .template-list-mark { position:absolute; top:0; right:0; bottom:0; left:0; display:block; border-radius:3px; background:url(../images/template-list-mark.png); text-align:center; cursor:pointer;}
.template-list .template-list-item:hover .template-list-image .template-list-mark .template-btn { display:inline-block; margin:85px 10px 10px; width:80px; line-height:35px; border-radius:2px; text-align:center; font-size:16px; color:#fff;}
.template-list .template-list-item:hover .template-list-image .template-list-mark .template-btn .fa { font-size:14px;}
.template-list .template-list-item:hover .template-list-image .template-list-mark .template-btn.template-use { background-color:#9BCE6A;}
.template-list .template-list-item:hover .template-list-image .template-list-mark .template-btn.template-preview { background-color:#9EC7EC;}

.template-pagination { display:inline-block; margin:60px auto; height:35px;}
.template-pagination a { display:inline-block; margin-right:5px; width:35px; line-height:35px; background-color:#fff; border-radius:3px; border:1px solid #ddd; text-align:center; font-size:14px; color:#999;}
.template-pagination a:hover { background-color:#f4f4f4; color:#444; text-decoration:none;}
.template-pagination a.current { border-color:#9EC7EC; background-color:#9EC7EC; color:#fff;}

/*- Mobile Template List -*/
/*.mobile-template-list {}
.mobile-template-list .template-list-item { width:260px; height:612px;}
.mobile-template-list .template-list-item .template-list-image { position:relative; z-index:1; clear:both; height:517px; border-radius:28px; background:url(../images/mobi-template-list-image-bg.gif) no-repeat center;}
.mobile-template-list .template-list-item .template-list-image img { margin:42px 2px 2px 2px; width:246px; height:412px;}

.mobile-template-list .template-list-item .template-list-image .template-ver { left:5px;}
.mobile-template-list .template-list-item:hover .template-list-image .template-list-mark { top:42px; left:7px; width:246px; height:412px; border-radius:0;}
.mobile-template-list .template-list-item:hover .template-list-image .template-list-mark .qcode-box { clear:both; display:block; margin:80px auto 0 auto; width:125px; height:155px;}
.mobile-template-list .template-list-item:hover .template-list-image .template-list-mark .qcode-box .qcode-text { clear:both; margin:0; line-height:30px; text-align:center; color:#fff;}
.mobile-template-list .template-list-item:hover .template-list-image .template-list-mark .qcode-box .qcode-img img { margin:0; padding:0; width:125px; height:125px;}
.mobile-template-list .template-list-item:hover .template-list-image .template-list-mark .template-btn-group { clear:both; display:block; margin-top:40px; height:35px;}
.mobile-template-list .template-list-item:hover .template-list-image .template-list-mark .template-btn-group .template-btn { margin:0 10px;}*/

/* Pc Mobile Template List */
.pm-template-list {}
.pm-template-list .template-list-item { width:260px;}
.pm-template-list .template-list-item .template-list-image { position:relative;}
.pm-template-list .template-list-item .template-list-image .template-pc-group { position:absolute; top:14px; right:2px; bottom:2px; left:2px; width:256px; height:192px;}
.pm-template-list .template-list-item .template-list-image .template-pc-group img { margin:0; padding:0;}
.pm-template-list .template-list-item .template-list-image .template-mobile-group { position:absolute; top:-10px; right:-20px; width:110px; height:218px; background:url(../images/mobile-template-list-image-bg.gif) no-repeat center top;}
.pm-template-list .template-list-item .template-list-image .template-mobile-group img { margin:17px 0 0 0; padding:0; width:104px; height:174px;}

/* Help */
.help-header-wrap { background-image:url(../images/help-banner.jpg);}

.help-banner-text { margin:160px auto 0 auto; text-align;center; line-height:2; font-size:24px; color:#fff;}
.help-banner-text h3 { clear:both; line-height:60px; font-size:48px; font-weight:normal;}

.help-container-wrap { padding:15px 0;}
.help-container-topbar { clear:both; height:45px; line-height:45px; border-bottom:1px solid #ddd; text-align:left;}

.help-container-topbar .search-group { position:relative; float:right; display:inline-block; margin-top:5px; width:300px; height:30px; border-radius:2px; border:1px solid #ddd; background-color:#fff;}

/*- Help Update -*/
.help-update-wrap { float:left; width:570px;}
.help-update-wrap .help-update-title { clear:both; margin:20px 0; line-height:35px; text-align:left; font-size:24px; color:#444;}
.help-update-wrap .help-update-list { clear:both; display:list-item; margin:0; padding:0;}
.help-update-wrap .help-update-list .help-update-list-item { clear:both; padding:0 100px 0 0; line-height:35px; border-bottom:1px dashed #ddd; text-align:left; font-size:14px; list-style:none; color:#666;}
.help-update-wrap .help-update-list .help-update-list-item a { *float:left; *display:block; line-height:35px; text-align:left; color:#666; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:nowrap;}
.help-update-wrap .help-update-list .help-update-list-item a:hover { color:#000; text-decoration:none;}

.help-update-wrap .help-update-list .help-update-list-item .help-update-date { float:right; *position:relative; margin-right:-100px; width:100px; line-height:35px; text-align:right; color:#999;}
.help-update-wrap .help-update-more { float:left; display:block; margin-top:20px; width:120px; line-height:40px; border-radius:3px; background-color:#3BAFDA; text-align:center; font-size:14px; color:#fff;}

/*- Help Quick Navgation -*/
.help-quick-nav { float:right; margin:0; padding:0; width:550px; list-style:none;}
.help-quick-nav .help-quick-nav-item { float:left; display:inline-block; margin:20px 10px 0 10px; width:162px; height:150px;}
.help-quick-nav .help-quick-nav-item a { display:block; height:150px; border-radius:3px; border:1px solid #ddd; background-color:#fff; color:#3BAFDA;}
.help-quick-nav .help-quick-nav-item a:hover { border-color:#3BAFDA; background-color:#f7f7f7; color:#3BAFDA; text-decoration:none;}

.help-quick-nav .help-quick-nav-item a .help-quick-nav-icon { clear:both; display:block; height:100px; line-height:100px; text-align:center; *font-size:80px; opacity:.6; filter:alpha(opacity=60);}
.help-quick-nav .help-quick-nav-item a .help-quick-nav-icon img { vertical-align:middle;}
.help-quick-nav .help-quick-nav-item a .help-quick-nav-title { clear:both; line-height:30px; font-size:16px;}

.help-quick-nav .help-quick-nav-item a:hover .help-quick-nav-icon { opacity:1; filter:alpha(opacity=100);}

.container-wrap hr { clear:both; margin:0; padding:0; height:1px; overflow:hidden; border:0; border-bottom:1px solid #ddd;}

/* Help View */
.help-header { clear:both; height:60px; background-color:#262626; color:#fff;}
.help-header .help-logo { float:left; width:230px; height:60px; background:url(../images/help-logo.png) no-repeat center; text-indent:-10000px;}
.help-header .help-search-group { float:right; margin-top:15px; width:300px; border-radius:3px; background-color:#fff;}

.help-container {}
.help-container .help-sidebar { float:left; padding:10px 15px; width:210px; color:#666; box-sizing:content-box; -webkit-box-sizing:content-box;}
.help-container .help-main { float:right; width:900px;}

.help-footer { clear:both; height:40px; line-height:40px; background-color:#f0f0f0; text-align:center; font-size:12px; color:#999;}

/*- Help Sidebar -*/
.help-sidebar-nav-group { clear:both; margin-bottom:10px; margin-bottom:5px\0; text-align:left;}
.help-sidebar-nav-group .help-sidebar-nav-title { clear:both; line-height:35px; font-size:14px; font-weight:bold; color:#444;}
.help-sidebar-nav-group .help-sidebar-nav-list { clear:both; display:list-item;}
.help-sidebar-nav-group .help-sidebar-nav-list .help-sidebar-nav-list-item { clear:both; padding-left:10px; padding-left:0\0; line-height:1.6; font-size:14px; color:#428bca; list-style:inside square;}
.help-sidebar-nav-group .help-sidebar-nav-list .help-sidebar-nav-list-item a { display:inline-block\0; color:#428bca; text-indent:-10px\0;}
.help-sidebar-nav-group .help-sidebar-nav-list .help-sidebar-nav-list-item a:hover { color:#2a64b0; text-decoration:none;}

/*- Help Main -*/
.breadcrumb { clear:both; line-height:35px; border-bottom:1px solid #eee; text-align:left; font-size:12px; color:#999;}
.breadcrumb .fa { margin-right:5px; font-size:14px;}

.help-content { padding:20px 0; line-height:1.8; text-align:left; font-size:14px; color:#666;}

/*- Faq Group -*/
.faq-group {}
.faq-group-topbar { clear:both; line-height:50px; text-align:left; font-size:24px; color:#444;}

.faq-list { clear:both; margin:0; margin-top:20px; padding:0; list-style:none;}
.faq-list .faq-list-item { float:left; display:block; margin:0 10px; width:270px; margin:0 6px\0; width:278px\0;}

.faq-list-title { clear:both; margin-bottom:10px; line-height:35px; text-align:left; font-size:16px; color:#444;}
.faq-list-title .faq-list-icon { display:inline-block; margin-right:5px; width:25px; height:25px; line-height:25px; text-align:center; border-radius:3px; font-size:14px; color:#fff;}
.faq-list-title .faq-list-icon .fa { *margin-top:25%;}

.faq-list-content { display:list-item;}
.faq-list-content a { clear:both; display:list-item; line-height:35px; text-align:left; font-size:14px; color:#666; list-style:inside square;}
.faq-list-content a:hover { color:#000; text-decoration:none;}

.faq-more { float:left; display:inline-block; margin-top:20px; padding:5px 12px; border-radius:3px; background-color:#eee; color:#666; font-size:14px;}
.faq-more:hover { background-color:#ccc; color:#444; text-decoration:none;}

/* Channel */
.channel-header-wrap { background-image:url(../images/channel-banner.jpg);}
.channel-banner-text { position:relative; margin:110px auto; width:640px; height:120px; line-height:1.5; font-size:24px; color:#fff;}
.channel-banner-text .channel-banner-title { clear:both; margin-bottom:30px; line-height:60px; font-size:48px; font-weight:normal;}

.channel-form-wrap { margin:20px auto; padding:20px; width:1120px; height:600px; border:1px solid #ddd; border-radius:3px; background-color:#fff; box-sizing:content-box; -webkit-box-sizing:content-box; text-align:left; color:#444; font-size:14px;}
.channel-form-wrap .channel-form-header { clear:both; height:35px; line-heigh35px; border-bottom:1px solid #eee; color:#999;}
.channel-form-wrap .channel-form-content { padding-top:40px;}

.channel-form-wrap .channel-form-content .form-input { padding:10px 6px;}
.channel-form-wrap .channel-form-content .form-label { padding-top:9px;}
.channel-form-wrap .channel-form-content .form-other { display:inline;}
.channel-form-wrap .channel-form-content .form-other label { margin-right:10px;}

.field-validation-error {  display: inline-block; padding: 7px 10px 6px 30px; line-height: 1.5; border-radius: 0 3px 3px 0; border: 0; background-color: rgba(233,87,63,1); color: rgba(255,255,255,1); }
.field-validation-error:before { float: left; display: inline-block; margin-left: -30px; width: 30px; line-height: 30px; text-align: center; font: normal normal normal 14px/1.5 FontAwesome; content: "\f057"; color: rgba(255,255,255,1); }


/* Banner alert */
.banner-alert { position:fixed; right:0; bottom:0; left:0; padding:10px; background:#000; background:rgba(0,0,0,.85); color:#fff; font-size:14px;}
.banner-alert .banner-alert-content { line-height:1.5;}
.banner-alert .banner-alert-close { position:absolute; top:10px; right:10px; display:block; width:20px; height:20px; line-height:20px; text-align:center; font-size:14px; color:#ccc; text-decoration:none;}
.banner-alert .banner-alert-close:hover { color:#fff; text-decoration:none;}


/*- Template Intro -*/
.intro-wrap { position:relative;}

.template-intro-wrap { display:none; position:absolute; top:0; right:0; bottom:0; left:0; z-index:999; background:url(../images/template-intro-mark-bg.png) repeat;}
.template-intro-wrap .template-intro { position:absolute; top:0; left:50%; bottom:0; margin-left:-580px; width:1160px;}
.template-intro-wrap .template-intro .template-intro-text { position:absolute; top:250px; left:50%; margin-left:-180px; width:360px; height:120px;}
.template-intro-wrap .template-intro .template-intro-arrow { position:absolute; top:400px; left:50%; margin-left:-31px; width:62px; height:78px; -webkit-animation:anim-runarrow 1s ease-in-out infinite alternate;}
@-webkit-keyframes anim-runarrow{
	from { top:400px}
	to { top:420px;}
}
.template-intro-wrap .template-intro .template-intro-box { position:absolute; top:540px; left:-20px; width:1200px; height:1400px;}


/* QQ Service Online */
.qos-wrap { position:absolute; z-index:9999; width:180px; height:335px; -webkit-box-shadow:0 5px 9px rgba(4,0,0,.17); box-shadow:0 5px 9px rgba(4,0,0,.17);}
.qos-wrap .qos-group { position:absolute; top:0; right:0;}
.qos-wrap .qos-group .qos-container { margin:0 auto; width:180px; border-radius:3px; background-color:#fff;}

.qos-group-header { clear:both; width:180px; height:130px; border-top-left-radius:3px; border-top-right-radius:3px; background:url(/content/statics/images/qq-service-header.png) no-repeat center top;}
.qos-group-header .qos-close { float:right; display:block; margin:10px 10px 0 0; width:16px; height:16px; background:url(/content/statics/images/qq-service-close.png) no-repeat center; overflow:hidden; text-indent:-20000px;}

.qos-qlist-group { clear:both; height:80px;}
.qos-qlist-group .qos-qlist { display:block; margin:0; padding:0; list-style:none; background-color:#fff;}
.qos-qlist-group .qos-qlist .qos-qlist-item { clear:both; display:block; margin-top:1px; height:40px;}
.qos-qlist-group .qos-qlist .qos-qlist-item:first-child { margin-top:0;}
.qos-qlist-group .qos-qlist .qos-qlist-item a { display:block; padding-left:15px; line-height:40px; background-color:#fafafa; text-align:left; font-size:14px; font-family:"Microsoft Yahei"; color:#484A4F; transition:all ease-out .3s;}
.qos-qlist-group .qos-qlist .qos-qlist-item a:hover { background-color:#484A4F; color:#fff; text-decoration:none;}
.qos-qlist-group .qos-qlist .qos-qlist-item .fa { margin-right:10px;}

.qos-phone { clear:both; height:65px; border-bottom-left-radius:3px; border-bottom-right-radius:3px; background-color:#fff;}
.qos-phone .qos-title { clear:both; padding:0 15px; line-height:30px; text-align:left; font-size:14px; font-family:"Microsoft Yahei";}
.qos-phone .qos-title .fa { margin-right:13px;}
.qos-phone .qos-content { line-height:30px; text-align:center; font-size:16px; color:#4DCDCD; font-family:Arial;}


.qos-share-group { clear:both; margin-top:3px; height:32px; border-radius:3px; background-color:#fff; -webkit-box-shadow:0 5px 9px rgba(4,0,0,.17); box-shadow:0 5px 9px rgba(4,0,0,.17);}
.qos-share-group .qos-share-btn,.qos-share-group .qos-totop-btn { position:relative; float:left; display:block; margin-right:1px; width:32px; line-height:32px; text-align:center; font-size:14px; color:#62BFE1; transition:all ease-out .3s;}
.qos-share-group .qos-share-btn:hover,.qos-share-group .qos-totop-btn:hover { background-color:#62BFE1; color:#fff; text-decoration:none;}
.qos-share-group .qos-totop-btn { float:right; margin-right:0; width:114px; font-family:"Microsoft Yahei";}
.qos-share-group .qos-totop-btn .fa { margin-left:10px;}

.qos-btn { display:none; float:left; width:32px; height:216px; border-radius:3px; background-color:#62BFE1; color:#fff;}
.qos-btn .qos-btn-item { position:relative; clear:both; display:block; height:32px; line-height:32px; text-align:center; color:#fff; cursor:pointer; transition:all ease-out .3s;}
.qos-btn .qos-btn-item:hover { background-color:#3bafda; color:#fff; text-decoration:none;}
.qos-btn .qos-btn-item:last-child { border-bottom-left-radius:3px; border-bottom-right-radius:3px;}

.qos-btn .qos-btn-item.qos-btn-text { height:120px; line-height:1.5; border-top-left-radius:3px; border-top-right-radius:3px;}
.qos-btn .qos-btn-item.qos-btn-text span { display:block; margin:0 auto; padding:10px 0; width:20px; text-align:center; word-wrap:break-word;}
.qos-btn .qos-btn-item.qos-btn-text span em { display:block; margin-bottom:10px; width:20px; height:20px; line-height:20px; border-radius:50%; background-color:#fff; font-style:normal; color:#62BFE1;}

.showHeight { height:216px !important;}

/*- Qcode Tips -*/
.qos-share-group .qos-share-btn:hover .qcode-tips { display:block; transition:all ease-in .3s;}
.qcode-tips { position:absolute; top:37px; left:50%; display:none; margin-left:-55px; padding:5px; width:110px; height:110px; border-radius:3px; background-color:#484A4F;}
.qcode-tips img { width:100px; height:100px;}
.qcode-tips .fa { position:absolute; top:-10px; left:50%; margin-left:-4px; color:#484A4F;}

.qos-btn .qos-btn-item:hover .qcode-tips { display:block; transition:all ease-in .3s;}
.qcode-tips.qos-btn-tips { top:50%; left:-115px; margin-top:-55px; margin-left:auto;}
.qcode-tips.qos-btn-tips .fa { top:50%; left:auto; right:-4px; margin-top:-7px; margin-left:auto;}